<script setup>
import { introApi } from "@/services/index";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { nextTick, ref, watch, onMounted } from "vue";
import { appInfo, loginSwitch } from "@/services/user";
import { appCategory, categoryCount } from "@/services/goods";
import Index from "../home/index.vue";
import { stockCounterStore } from "@/stores/stock";

const stockObj = stockCounterStore();

onLoad((e) => {
  const topHeight = ref(uni.getStorageSync("topHight") || 0);
  code.value = e.code;
  // getList();
  getAppCategory();
});

const form = ref({
  name: "",
});
form.value.scId = ref(stockObj.form.scId);

const newCategoryList = ref([]);

const getAppCategory = async () => {
  try {
    let res = await categoryCount(form.value);
    // categoryList.value = res.data;
    // form.value.categoryId = res.data[0].id;
    // getAppProductQuery(1);
    let arr = [];
    let newArr = [];
    let newArr2 = [];

    res.data.forEach((item, index) => {
      if (!item.parentId) {
        arr.push({ ...item, open: false, select: false, children: [] });
      } else {
        newArr.push({ ...item });
      }
    });
    arr.forEach((item, index) => {
      newArr.forEach((item2, index2) => {
        if (item.id == item2.parentId) {
          // item2.children = item.children || [];

          item.children.push({
            ...item2,
            open: false,
            select: false,
            children: [],
          });
          newArr.splice(index2, 1);
        }
      });
    });
    arr.forEach((item, index) => {
      item.children.forEach((element, index) => {
        newArr.forEach((item2, index2) => {
          if (element.id == item2.parentId) {
            element.children.push({
              ...item2,
              open: false,
              select: false,
              text: item2.name,
            });
          }
        });
      });
    });
    console.log(arr);
    newCategoryList.value = arr;
    // newCategoryList.value = [];
  } catch (e) {
    console.log(e);
  }
};

const code = ref("");
const introData = ref([]);

const getList = async () => {
  try {
    // 发送请求
    let res = await appInfo({});
    if (res.code == 200) {
      introData.value = res.data.employees;
      if (res.data.employees <= 0) {
        uni.redirectTo({
          url: "/pages/cashier/sales_order/index",
        });
      }
    }
  } catch (e) {
    uni.showToast({
      title: e.info,
      icon: "none",
    });
  }
};
// const selectFun = async (item) => {
//   uni.navigateTo({
//     url: `/pages/cashier/sales_order/index?ids=${
//       item.shopId
//     }&shopName=${decodeURIComponent(item.shopName)}`,
//   });
// };

const goadd = () => {
  let arr = [];
  newCategoryList.value.forEach((item) => {
    if (item.select) {
      arr.push(item);
    } else {
      item.children.forEach((item2) => {
        if (item2.select) {
          arr.push(item2);
        } else {
          item2.children.forEach((item3) => {
            if (item3.select) {
              arr.push(item3);
            }
          });
        }
      });
    }
  });

  console.log(arr);
  stockObj.setSelectDate(JSON.stringify(arr));

  uni.redirectTo({
    url: "/pages/stocktaking/cerate/index",
  });
};
const onClickLeft = () => history.back();
const onClickRight = () => showToast("按钮");

const themeVars = ref({
  navBarIconColor: "#000000",
  navBarTextColor: "#000000",
  navBarBackground: "transparent",
});
const searchFun = () => {
  getAppCategory();
};

const openFun = (itemO, index, index2) => {
  let isOpen = itemO.open;

  // newCategoryList.value.forEach((item, in1) => {
  //   if (in1 != index) {
  //     item.open = false;
  //   }
  //   item.children.forEach((item2, in2) => {
  //     if (in2 != index2) {
  //       item2.open = false;
  //     }
  //     item2.children.forEach((item3, in3) => {
  //       item3.open = false;
  //     });
  //   });
  // });
  itemO.open = !isOpen;
};

const selectAll = ref(false);

const selectAllFun = () => {
  backFun(newCategoryList.value);

  selectAll.value = !selectAll.value;
};
const backFun = (list) => {
  list.forEach((item) => {
    item.select = !selectAll.value;
    if (item.children) {
      backFun(item.children);
    }
  });
};
const selectFun = (itemO, index, index2, index3) => {
  let isOpen = itemO.select;

  itemO.select = !isOpen;
  if (!itemO.select) {
    if (index > 0 || index === 0) {
      newCategoryList.value[index].select = false;
    }

    if (index2 > 0 || index2 === 0) {
      newCategoryList.value[index].children[index2].select = false;
    }
  }
  if (itemO.select) {
    if (index3 > 0 || index3 === 0) {
      if (newCategoryList.value[index].children[index2].children) {
        let arr = newCategoryList.value[index].children[index2].children.filter(
          (element2) => {
            return element2.select == false;
          }
        );
        console.log("333", arr);
        if (arr.length <= 0) {
          newCategoryList.value[index].children[index2].select = true;
          if (newCategoryList.value[index].children) {
            let arr = newCategoryList.value[index].children.filter(
              (element) => {
                return element.select == false;
              }
            );

            if (arr.length <= 0) {
              newCategoryList.value[index].select = true;
            }
          }
        }
      }

      if (newCategoryList.value[index].children) {
        let arr = newCategoryList.value[index].children.filter((element) => {
          return element.select == false;
        });

        if (arr.length <= 0) {
          newCategoryList.value[index].select = true;
        }
      }
    }
    if (index2 > 0 || index2 === 0) {
      console.log(index2);
      if (newCategoryList.value[index].children) {
        let arr = newCategoryList.value[index].children.filter((element) => {
          return element.select == false;
        });
        console.log("22222", arr);
        if (arr.length <= 0) {
          newCategoryList.value[index].select = true;
        }
      }
    }
    let arr2 = newCategoryList.value.filter((element) => {
      return element.select == false;
    });

    if (arr2.length <= 0) {
      selectAll.value = true;
    }
  } else {
    selectAll.value = false;
  }

  if (itemO.children && itemO.children.length > 0) {
    itemO.children.forEach((item, index) => {
      item.select = itemO.select;
      if (item.children && item.children.length > 0) {
        item.children.forEach((item2, index2) => {
          item2.select = itemO.select;
        });
      }
    });
  }
};
//无网状态
const connected = () => {
  getAppCategory();
};
</script>

<template>
  <top-nav
    :title="'选择要进行盘点的分类'"
    :border="false"
    rType="save"
  ></top-nav>

  <!-- <view class="top" :style="'top: calc( 88rpx + ' + topHeight + 'px);'">
    <view class="search-k">
      <up-search
        shape="square"
        placeholder="分类名称"
        v-model="form.name"
        :showAction="false"
        @search="searchFun"
      ></up-search>
    </view>
  </view> -->

  <view class="content">
    <view class="select-list">
      <view
        class="select-list-item"
        v-for="(item, index) in newCategoryList"
        :key="index"
      >
        <view class="select-list-item-title" @click="openFun(item, index)">
          <view class="left">
            <image
              class="left-image"
              :class="item.open ? 'left-image2' : ''"
              src="@/static/images/select_j.png"
              mode="widthFix"
            />
            <view
              class="select"
              :class="item.select ? 'select2' : ''"
              @click.stop="selectFun(item, index)"
            >
              <image
                v-if="item.select"
                src="@/static/images/select.png"
                mode="scaleToFill"
              />
            </view>
            <text>{{ item.name || item.categoryName }}</text>
          </view>
          <view class="right">{{ item.count }}</view>
        </view>
        <view
          v-if="item.open"
          class="select-list-item2"
          v-for="(item2, index2) in item.children"
          :key="index2"
        >
          <view
            class="select-list-item-title"
            @click.stop="openFun(item2, index, index2)"
          >
            <view class="left">
              <image
                class="left-image"
                :class="item2.open ? 'left-image2' : ''"
                src="@/static/images/select_j.png"
                mode="widthFix"
              />
              <view
                @click.stop="selectFun(item2, index, index2)"
                class="select"
                :class="item2.select ? 'select2' : ''"
              >
                <image
                  v-if="item2.select"
                  src="@/static/images/select.png"
                  mode="scaleToFill"
                />
              </view>

              <text>{{ item2.name || item2.categoryName }}</text>
            </view>
            <view class="right">{{ item2.count }}</view>
          </view>
          <view
            v-if="item2.open"
            class="select-list-item3"
            v-for="(item3, index3) in item2.children"
            :key="index3"
          >
            <view class="select-list-item-title">
              <view class="left">
                <!-- <image
                  class="left-image"
                  src="@/static/images/select_j.png"
                  mode="widthFix"
                /> -->
                <view
                  @click.stop="selectFun(item3, index, index2, index3)"
                  class="select"
                  :class="item3.select ? 'select2' : ''"
                >
                  <image
                    v-if="item3.select"
                    src="@/static/images/select.png"
                    mode="scaleToFill"
                  />
                </view>
                <text>{{ item3.name || item3.categoryName }}</text>
              </view>
              <view class="right"> {{ item3.count }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>

  <view class="goods_bt">
    <view class="goods_bt_to">
      <view class="bt_left" @click="selectAllFun">
        <view class="select" :class="selectAll ? 'select2' : ''">
          <image
            v-if="selectAll"
            src="@/static/images/select.png"
            mode="scaleToFill"
          />
        </view>
        <text>全选</text>
      </view>

      <up-button
        class="bt_right"
        @click="goadd"
        type="primary"
        color="#1679FB"
        text="下一步"
      ></up-button>
    </view>
  </view>
  <noWork @connected="connected"> </noWork>
</template>

<style lang="scss" scoped>
@import "index.scss";
</style>
